<template>
	<div class="mk-panel">
		<div class="panel-header" v-if="title">
			<div class="flex justify-between items-center">
				<div class="flex">
					<div class="self-center min-w-6em">{{ title }}</div>
					<div class="no-print" style="display: inline-flex;" v-if="showButton">
						<slot name="button">
							<el-switch v-model="isEdit" :disabled="isEdit" class="no-print ml10 mr10" active-text="编辑"
								inactive-text="查看" />
							<el-button type="primary" v-if="isEdit" @click="emits('save')">保存</el-button>
						</slot>
					</div>
				</div>
				<div v-if="isCollapsed" class="no-print">
					<el-button icon="ele-Minus" type="text" v-if="showMore" @click="showMore = false" />
					<el-button icon="ele-Plus" type="text" v-else @click="showMore = true" />
				</div>
			</div>
		</div>
		<div class="panel-content full-table" v-bind="$attrs">
			<slot>面板内容</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
// 带编辑开关的面板，支持折叠信息
// 用法
// <MkPanel title="标题" isCollapsed showButton v-model:isEdit="isEdit" v-model:showMore="showMore"></MkPanel>

import { ref } from 'vue';

defineOptions({
	name: 'MkPanel'
})

const props = defineProps({
	title: {
		type: String,
		default: '' // 默认不显示标题栏
	},
	isCollapsed: { // 是否使用折叠
		type: Boolean,
		default: false
	},
	showButton: { // 是否显示按钮
		type: Boolean,
		default: false
	},
})
// 使用 defineModel 声明双向绑定属性（支持 v-model）
const showMore = defineModel<boolean>('showMore', { default: false }); // 对应父组件的 v-model:show-more
const isEdit = defineModel<boolean>('isEdit', { default: false });

const emits = defineEmits(['save']);

</script>

<style lang="scss" scoped>
.mk-panel {
	background-color: #fff;
	border-radius: 4px;
	margin: 0px 6px 6px 0px;

	.panel-header {
		padding: 6px 10px 6px 10px;
		border-bottom: 1px solid #F8F8F8;
		font-size: medium;
		color: #1479d7;
	}

	.panel-content {
		padding: 10px 10px 0px 10px;
	}
}

.justify-between {
	justify-content: space-between;
}

.items-center {
	align-items: center;
}

.self-center {
	align-self: center;
}

.min-w-6em {
	min-width: 6em;
}
</style>
<style>
@media print {
	.no-print {
		display: none;
	}
}
</style>
